import { videoShowApi, videoAddHitsApi, commentAddApi } from '../utils/axiosapi.js'
import { store } from '../utils/store.js'

const { message, notification } = antd
const { ref, reactive } = Vue

export default {
  async setup() {
    const route = VueRouter.useRoute()

    const comment = ref({
      videoId: +route.params.id,
      content: ''
    })

    const data = ref({})

    data.value = await videoShowApi(comment.value.videoId)

    const avatarImg = ''

    const handleSubmit = () => {
      if (!comment.value.content) {
        notification.error({ message: '操作错误', description: '请输入评论内容！' })
        return
      }
      commentAddApi(comment.value)
        .then(res => data.value.comments = res.data)
        .catch(err => notification.error({ message: '操作错误', description: err.response.data }))
    }

    const handlePlaying = () => videoAddHitsApi(comment.value.videoId)

    return { data, avatarImg, comment, handleSubmit, dayjs, store, handlePlaying }
  },
  template: `
    <a-row :gutter="[16,8]">
      <a-col :span="data.video.auditStatus === 'PASSED' ? 16 : 24">
        <a-card hoverable>
          <template #cover>
            <video controls style="height: 394px"
              :src="data.video.videoLink"
              :poster="data.video.videoLogo"
              @playing="handlePlaying"></video>
          </template>
          <a-card-meta>
            <template #description>
              <a-descriptions :title="data.video.videoName" :column="4">
                <a-descriptions-item label="播放量">{{data.video.videoHits}}</a-descriptions-item>
                <a-descriptions-item label="类别">{{data.video.categoryName}}</a-descriptions-item>
                <a-descriptions-item label="状态">{{data.video.auditStatusDesc}}</a-descriptions-item>
                <a-descriptions-item label="作者">{{data.video.creatorNick}}</a-descriptions-item>
                <a-descriptions-item label="创建时间">{{data.video.createdDate}}</a-descriptions-item>
                <a-descriptions-item label="审核人">{{data.video.auditorNick}}</a-descriptions-item>
                <a-descriptions-item label="审核时间">{{data.video.auditedDate}}</a-descriptions-item>
              </a-descriptions>
            </template>
          </a-card-meta>
        </a-card>
      </a-col>
      <a-col :span="8" v-if="data.video.auditStatus === 'PASSED'">
        <a-list
          v-if="data.comments.length > 0"
          :data-source="data.comments"
          :header="data.comments.length + ' 条评论'"
          item-layout="horizontal"
        >
          <template #renderItem="{ item }">
            <a-list-item>
              <a-comment
                :author="item.creatorNick"
                :avatar="avatarImg"
                :content="item.content"
                :datetime="dayjs(item.createdDate).fromNow()"/>
            </a-list-item>
          </template>
        </a-list>
        <a-empty description="暂无评论" v-else/>
        <a-comment v-if="!!store.user">
          <template #avatar>
            <a-avatar :src="avatarImg" />
          </template>
          <template #content>
            <a-form-item>
              <a-textarea v-model:value="comment.content" :rows="4" placeholder="请输入评论内容"/>
            </a-form-item>
            <a-form-item>
              <a-button html-type="submit" type="primary" @click="handleSubmit">添加评论</a-button>
            </a-form-item>
          </template>
        </a-comment>
      </a-col>
    </a-row>
  `
}
